<!-- 这一页是管理业页面级组件，需要登录后访问 -->
<template>
  <div class="common-layout">
    <el-container>
      <el-header height="auto" style="background-color: #f0f9ff">
        <div style="margin: 20px">
          <el-row>
            <el-col :span="21">
              <h1 class="logo">欢迎回来，IPSS课题组成员</h1>
            </el-col>

            <el-col :span="3">
              <button
                id="loginBtn"
                class="login-btn"
                @click="$router.push('/home')"
              >
                返回首页
              </button>
            </el-col>
          </el-row>
        </div>
      </el-header>

      <el-container>
        <!-- 侧边栏 -->
        <el-aside width="200px">
          <el-menu
            default-active="publish-notification"
            class="el-menu-vertical-demo"
            @select="handleMenuSelect"
          >
            <el-menu-item index="user-info" :disabled="role == 'admin'">
              <template #title>
                <el-icon><location /></el-icon>
                <span>用户信息</span>
              </template>
            </el-menu-item>
            <el-menu-item
              index="publish-notification"
              :disabled="!['user', 'admin'].includes(role)"
            >
              <el-icon><icon-menu /></el-icon>
              <span>发布信息</span>
            </el-menu-item>
            <el-menu-item
              index="member-management"
              :disabled="role !== 'admin'"
            >
              <el-icon><document /></el-icon>
              <span>成员管理</span>
            </el-menu-item>
            <el-menu-item
              index="user-notices"
              :disabled="!['user', 'admin'].includes(role)"
            >
              <el-icon><icon-menu /></el-icon>
              <span>通知管理</span>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <!-- 主内容区 -->

        <el-main style="background-color: #f9fafb">
          <!-- 页面内容会根据导航栏的选择而变化 -->
          <div v-if="activeMenu === 'user-info'">
            <UserInfo />
          </div>

          <div v-if="activeMenu === 'publish-notification'">
            <PublishNotification />
          </div>

          <div v-if="activeMenu === 'member-management'">
            <MemberManagement />
          </div>

          <div v-if="activeMenu === 'user-notices'"><UserNotices /></div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import UserInfo from "@/components/AdminPage/UserInfo.vue";
import PublishNotification from "@/components/AdminPage/PublishNotification.vue";
import MemberManagement from "@/components/AdminPage/MemberManagement.vue";
import UserNotices from "@/components/AdminPage/UserNotices.vue";

const role = localStorage.getItem("role") || "guest";
// const activeTab = ref("publish-notification");

import { ref } from "vue";
import {
  Document,
  Menu as IconMenu,
  Location,
  User,
} from "@element-plus/icons-vue";

// 激活的菜单项，默认是 'user-info' member-management
const activeMenu = ref("publish-notification");

// 处理菜单项选择
const handleMenuSelect = (index: string) => {
  activeMenu.value = index;
};
</script>

<style scoped>
/* Header */
.header {
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 16px 32px;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #1e40af;
}

.login-btn {
  background-color: #2563eb;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  transition: background-color 0.3s ease;
}

.login-btn:hover {
  background-color: #1d4ed8;
}
</style>
